<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style rel="stylesheet">
        tr{
        }
        td{
            background-color:#ffffff;
            width: 10px;
            height: 10px;
            border:1px solid black;
        }
    </style>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
</head>
<body>
<div id="home"></div>
<div class="button" id="button" style="width: 100px;height: 100px;background-color: aqua"></div>
<script>
//    画区域
var kuai =new Array();
for(var i=0;i<15;i++){
    var a = document.getElementById("home").appendChild(document.createElement("tr"));
    kuai[i]=a;
    for(var n=0;n<12;n++){
        var b = a.appendChild(document.createElement("td"));
        kuai[i][n] = b;
    }
}
console.log(kuai[2][5]);
//kuai[2][5].style.backgroundColor="red";

//    工厂模式生成图形
function Cell(row,col) {
    this.row = row;
    this.col = col;
//    this.color = color;
//    kuai[row][col].style.backgroundColor = color;
}

function Shape(cells,color) {
    if(cells){
        this.ces = cells;
        for(var i =0;i<this.ces.length;i++){
            this.ces[i].color = color;
            kuai[this.ces[i].row][this.ces[i].col].style.backgroundColor = color;
            console.log('测试');
        }
    }
}
Shape.prototype = {
    moveLeft:function(){
        return "moveleft";
    },
    moveRight:function(){
        return "moveright";
    },
    moveDown:function (cs) {
        console.log(cs);
        for(var i=0;i<cs.length;i++){
            console.log("xunhuanli");
            cs[i].row = cs[i].row++;
        }
        console.log(cs);
    }
}
function  T() {
    var LAarray = [
        new Cell(0,4),
        new Cell(0,5),
        new Cell(0,6),
        new Cell(1,5)
    ];
    this.laarray = LAarray;
    Shape.call(this,LAarray,"red");
}
T.prototype = new Shape();

function  I() {
    var LAarray = [
        new Cell(0,6),
        new Cell(1,6),
        new Cell(2,6),
        new Cell(3,6)
    ];

    Shape.call(this,LAarray,"yellow");
}
I.prototype = new Shape();

var t = new T();

//var i = new I();
//    往下走
document.getElementById("button").onclick = function () {
    console.log(t.laarray);
    t.moveDown(t.laarray);
}
</script>
</body>
</html>